<script setup lang="ts">
import { HomeData } from "@@/api/module/tabbarPage";
import useUserinfoStore from "@@/store/useUserinfoStore";
interface Props {
  color: string | undefined;
  tree: HomeData.Tree[] | undefined;
  level: number | undefined;
}
const props = defineProps<Props>();
const userinfoStore = useUserinfoStore();

function treeTier(tree: any) {
  const { address, created_at } = tree || {};
  return {
    address,
    created_at,
    bg: address ? props.color : undefined,
  };
}
</script>

<template>
  <div>
    <div class="auto-MT-lg">
      <div class="flex-J-C">
        <Bdot
          :bg="userinfoStore.address ? color : undefined"
          :address="userinfoStore.address"
          :created_at="userinfoStore.loginTimestamp"
        />
      </div>
      <div class="flex-J-SE">
        <Bdot :="treeTier(tree?.at(0))" />
        <Bdot :="treeTier(tree?.at(1))" />
      </div>
      <div class="flex-J-SE">
        <Bdot :="treeTier(tree?.at(0)?.tree?.at(0))" :placement="'right'" />
        <Bdot :="treeTier(tree?.at(0)?.tree?.at(1))" />
        <Bdot :="treeTier(tree?.at(1)?.tree?.at(0))" />
        <Bdot :placement="'left'" :="treeTier(tree?.at(1)?.tree?.at(1))" />
      </div>
      <div class="flex-J-SE">
        <Bdot
          :="treeTier(tree?.at(0)?.tree?.at(0)?.tree?.at(0))"
          :placement="'right'"
        />
        <Bdot :="treeTier(tree?.at(0)?.tree?.at(0)?.tree?.at(1))" />
        <Bdot :="treeTier(tree?.at(0)?.tree?.at(1)?.tree?.at(0))" />
        <Bdot :="treeTier(tree?.at(0)?.tree?.at(1)?.tree?.at(1))" />
        <Bdot :="treeTier(tree?.at(1)?.tree?.at(0)?.tree?.at(0))" />
        <Bdot :="treeTier(tree?.at(1)?.tree?.at(0)?.tree?.at(1))" />
        <Bdot :="treeTier(tree?.at(1)?.tree?.at(1)?.tree?.at(0))" />
        <Bdot
          :="treeTier(tree?.at(1)?.tree?.at(1)?.tree?.at(1))"
          :placement="'left'"
        />
      </div>
      <h2 class="T-A-C shadow-M1" style="color: #f8dd87">VIP{{ level }}</h2>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
